<template>
	<div class="container">
		<div class="handle-box">
      <el-input v-model="this.searchInput" placeholder="关键字" style="width: 300px;margin-right: 15px"/>
      <el-button type="primary" @click="handleSearch"><el-icon><Search /></el-icon> 搜索</el-button>
    </div>
    <el-table 
	:data="this.answer" 
	border 
	class="table" 
	ref="multipleTable" 
	header-cell-class-name="table-header"
	height="500">
      <el-table-column prop="answer_id" label="ID" width="55" align="center"></el-table-column>
      <el-table-column label="回答详情" align="center" :show-overflow-tooltip="true">
		<template v-slot:default="scope">
			<div v-html="this.md.render(scope.row.answer_content)"></div>
    	</template>
	  </el-table-column>
      <el-table-column prop="liked_count" label="点赞数" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="220" align="center">
        <template #default="scope">
          <!-- <el-button link :icon="Edit" type="primary" @click="editAnswer(scope.$index)">
            <el-icon><Edit /></el-icon> 编辑
          </el-button> -->
          <el-button link :icon="Delete" type="danger" @click="deleteAnswer(scope.$index)">
            <el-icon><Delete /></el-icon> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

	<div class="pagination">
      <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="pageIndex"
          :page-size="pageSize"
          :total="Total"
          @current-change="handlePageChange"
      />
    </div>
	</div>
</template>


<script>
import axios from 'axios';
import { ref } from 'vue';
import MarkdownIt from 'markdown-it'
import { ElNotification } from 'element-plus';


export default {
	data(){
		return{
			message : ref('first'),
			answer :[],
			answerList: [],
			searchInput : "",
			pageIndex : 1,
			pageSize : 10,
			Total : 10,
			md : new MarkdownIt(),
			text : '# Hello, world!;```console.log("hello word")```',
		}
	},
	mounted(){
		this.getAnswerList()
	},
	methods:{
		getAnswerList(){
			axios.get(`http://localhost:8080/answer`)
			.then(resp => {
				this.answerList = resp.data.data
				this.Total = this.answerList.length
    			this.getData()
			})
			.catch(error => {
				console.log(this.answerList)
				console.log("获取回答列表失败", error)
			})
		},
		getData(){
			this.answer = this.answerList.filter((answer, index) => {
				return answer.answer_content.toLowerCase().indexOf(this.searchInput.toLowerCase()) === 0
					&& index >= (this.pageIndex - 1) * this.pageSize
					&& index <= this.pageIndex * this.pageSize
			})
		},
		deleteAnswer(index){
			axios.delete("http://localhost:8080/answer?answer_id=" + this.answer[index].answer_id)
			.then(resp => {
				if(resp.data.data){
					ElNotification({
						title: 'Success',
						message: '删除成功',
						type: 'success',
					})
				}else{
					ElNotification({
						title: 'Errror',
						message: '删除失败，请稍后再试',
						type: 'error',
					})
				}
			})
			.catch(error => {
				console.log("删除回答失败" + error)
			})
			this.answer.splice(index, 1)
		},
		handleSearch(value){
			this.searchInput = this.searchInput.trim()
			this.getData()
		},

	}
}
</script>

<style>
.message-title {
	cursor: pointer;
}
.handle-row {
	margin-top: 30px;
}
.handle-box {
  margin-bottom: 20px;
}
</style>
